<template>
    <div class="view-wrapper">
        <div class="head">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
            <el-form-item label="" prop="query">
              <el-input v-model="queryParams.query" placeholder="活动名称/合成NFR/会员姓名/手机号" clearable size="small"
                @keyup.enter.native="handleQuery" style="width: 280px" />
            </el-form-item>
            <el-form-item label="合成结果"  prop="status">
              <el-select v-model="queryParams.status" placeholder="全部" size="small">
                <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
                      <el-form-item label="合成时间：" prop="date">
              <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" 
                start-placeholder="开始日期" end-placeholder="结束日期" >
              </el-date-picker>
            </el-form-item> 
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
       
        <div class="listBox">
          <div style="margin-bottom: 14px">
            <export-excel-button title="合成明细列表" action="/shenye/casting/activity/record/export" :params="ExportParams" />
          </div>
          <el-table v-loading="loading" :data="customerList" stripe border>
            <el-table-column label="序号" type="index" width="55" align="center" fixed />
            <el-table-column label="铸造编号" align="center" prop="castingNo" :show-overflow-tooltip="true" />
            <el-table-column label="活动名称" align="center" prop="castingActivityName" :show-overflow-tooltip="true" />
            <el-table-column label="合成NFR" align="center" prop="castingEquityCardName" :show-overflow-tooltip="true"/>
            <el-table-column label="卡编号" align="center" prop="cardNo" :show-overflow-tooltip="true"/>
            <el-table-column label="合成材料" align="center" prop="castingMaterials" :show-overflow-tooltip="true" width="260">
              <template slot-scope="scope">
                  <div class="listArr">
                    <div v-for="(item,index) in scope.row.castingMaterials" :key="index">{{item}}</div>
                  </div>
              </template>
            </el-table-column>
            <el-table-column label="手续费" align="center" prop="castingServiceFee" :show-overflow-tooltip="true"/>
            <el-table-column label="会员姓名" align="center" prop="customerName" :show-overflow-tooltip="true"/>
            <el-table-column label="手机号" align="center" prop="customerPhone" :show-overflow-tooltip="true" />
            <el-table-column label="合成时间" align="center" prop="createTime" :show-overflow-tooltip="true" width="160" />
            <el-table-column label="成功率" align="center" prop="realSuccessRate" :show-overflow-tooltip="true" />
            <el-table-column label="合成结果" align="center" prop="status" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                <dict-tag :options="statusList" :value="scope.row.status" />
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
      </div>
    </div>
    
  </template>
  
  <script>
    import {
      adminDict,
          recordList,
    } from "@/api/blindBox/factoryConfig";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
    export default {
      name: "Customer",
      components: {
        ExportExcelButton
      },
      props: {
        id: String,
        pathType: String,
      },
      data() {
        return {
          addActivity: false,
          // 遮罩层
          loading: false,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 限时任务表格数据
          statusList: [],
          customerList: [
           
          ],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            startDate: null,//	开始时间
            endDate: null,//结束时间	
            query: null,//query
            status: '',
          },
          date: [],
        };
      },
      computed: {
        ExportParams() {
          const params = {
            ...this.queryParams,
          };
          return params;
        },
      },
      created() {
        this.queryParams.limitTaskId = this.id
        
        if(this.$route.query.phone){
          this.queryParams.query = this.$route.query.phone;
        }
        this.getDict()
        this.getList();
      },
      methods: {
        //获取状态字典
        getDict() {
          var dictType = "casting_activity_record_status";
          this.$getSelectList(dictType)
            .then((res) => {
              var arr = [{
                id: "",
                value: "全部",
              }, ];
              this.statusList = arr.concat(res.result[0].dictList);
              // this.statusList = res.result[0].dictList;
            })
            .finally(() => {
              this.loading = false;
            });
        },
        /** 神椰铸造活动合成明细列表 */
        getList() {
          this.loading = true;
          if (this.date) {
            this.queryParams.startDate = this.date[0]
            this.queryParams.endDate = this.date[1]
          }
          recordList(this.queryParams).then(response => {
              this.total = response.result.total
              this.customerList = response.result.records
              this.customerList = this.customerList.map(item => {
                // console.log('item',item)
                Object.keys(item).forEach(key => {
                  if (item[key] === '') {
                    item[key] = '-'
                  }
                })
                return item
              })
              
              this.loading = false;
            
          }).finally(()=>{
            this.loading = false;
          })
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm();
          this.$refs["queryForm"].resetFields();
          this.date = []
          this.queryParams.query = '';
          console.log('this.queryParams', this.queryParams)
          this.handleQuery();
        },
      }
    };
  
  </script>
  <style lang="scss" scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
    }
  </style>
  